﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Sudo Slider | Partial sides</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <link rel="STYLESHEET" type="text/css" href="../css/style.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="../js/jquery.sudoSlider.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var sudoSlider = $("#slider").sudoSlider({
                continuous:true,
                prevNext: false,
                touch: true,
                numeric: true,
                updateBefore: true,
                beforeAnimation: function (t, slider, speed) {
                    $(this).fadeTo(speed, 1);
                    slider.find(".slide").not($(this)).fadeTo(speed, 0.5);
                },
                initCallback: function () {
                    var currentSlide = this.getSlide(this.getValue("currentSlide"));
                    currentSlide.fadeTo(0, 1);
                    this.find(".slide").not(currentSlide).fadeTo(0, 0.5);

                    this.css("overflow", "visible");
                }
            });
        });
    </script>

    <style type="text/css">
        /* Made this, just as well use it */

        .numericControls {
            width: 100%;
            text-align: center !important;
            font-size: 0;
            list-style: none;
        }

        .numericControls * {
            display:inline;
        }

        .numericControls li {
            margin: 0 !important;
            padding: 0;
            float: none !important;
        }

        .numericControls a {
            text-indent: -9000px;
            width: 25px !important;
            height: 25px !important;;
            padding: 0 !important;
            margin: 5px;
            box-shadow: 0 1px 1px black;
            border: 3px solid #eee !important;
            border-radius: 20px;
            display: inline-block;
            background: #333333 !important;
            text-decoration: none;
            color: #fff;
            float: none !important;
        }

        .numericControls .current a {
            background: #ffffff !important;;
            color: #333 !important;;
        }

        .sudoSlider-dragging {
            cursor: url(../images/openhand.cur), auto;
            cursor: url(../images/openhand.cur) 8 8, auto;
        }
    </style>

</head>
<body>
<div id="container" style="width: 100%;overflow: hidden;">
    <h1 style="text-align: center;">Sudo Slider jQuery Plugin - Partial sides</h1>
	<div style="position:relative;width: 50%;margin: 0 auto;">
		<div id="slider" style="width: 100%;overflow: visible !important;">
            <img src="../images/01.jpg" alt="image description" style="width: 100%"/>
            <img src="../images/02.jpg" alt="image description" style="width: 100%"/>
            <img src="../images/03.jpg" alt="image description" style="width: 100%"/>
            <img src="../images/04.jpg" alt="image description" style="width: 100%"/>
            <img src="../images/05.jpg" alt="image description" style="width: 100%"/>
		</div>
	</div>
    <div style="width: 696px; margin: 0 auto">
        <h3>Usage</h3>
        <h4>Include the javascripts</h4>
        <pre>
&lt;script type="Text/Javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="../js/jquery.sudoSlider.min.js"&gt;&lt;/script&gt;</pre>
        <h4>The Javascript to start it.</h4>
        <pre>
&lt;script type="text/javascript" &gt;
   $(document).ready(function(){
      var sudoSlider = $("#slider").sudoSlider({
         continuous:true,
         prevNext: false,
         touch: true,
         numeric: true,
         beforeAnimation: function (t, slider, speed) {
            $(this).fadeTo(speed, 1);
            slider.find(".slide").not($(this)).fadeTo(speed, 0.5);
         },
         initCallback: function () {
            var currentSlide = this.getSlide(this.getValue("currentSlide"));
            currentSlide.fadeTo(0, 1);
            this.find(".slide").not(currentSlide).fadeTo(0, 0.5);

            this.css("overflow", "visible");
         }
      });
   });
&lt;/script&gt;</pre>
        <h4>The HTML</h4>
        <pre>
&lt;div style="width: 100%;overflow: hidden;""&gt;
   &lt;div style="position:relative;width: 50%;margin: 0 auto;"&gt;
      &lt;div id="slider" style="width: 100%;overflow: visible !important;"&gt;
         &lt;img src="../images/01.jpg" alt="image description" style="width: 100%"/&gt;
         &lt;img src="../images/02.jpg" alt="image description" style="width: 100%"/&gt;
         &lt;img src="../images/03.jpg" alt="image description" style="width: 100%"/&gt;
         &lt;img src="../images/04.jpg" alt="image description" style="width: 100%"/&gt;
         &lt;img src="../images/05.jpg" alt="image description" style="width: 100%"/&gt;
      &lt;/div&gt;
   &lt;/div&gt;
&lt;/div&gt;
    </pre>
    </div>

    <div style="width:728px;height:90px;margin:0 auto;">
        <script type="text/javascript">
            <!--
            google_ad_client = "pub-8170632875475442";
            /* Sudo Slider, lang horisontal */
            google_ad_slot = "0149025622";
            google_ad_width = 728;
            google_ad_height = 90;
            //-->
        </script>
        <script type="text/javascript"
                src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
        </script>
    </div>
</div>
<script type="text/javascript">
    /* Google Analytics, please remove
     var _gaq = _gaq || [];
     _gaq.push(['_setAccount', 'UA-20484420-1']);
     _gaq.push(['_trackPageview']);

     (function() {
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
     })();
     /* */
</script>
</body>
</html>